<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('帖子详情')"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<body class="white-bg">
<div class="page_left col-lg-9 col-md-9 col-sm-12 col-xs-12" th:object="${talk}">
    <h3>
        <p id="talkCenter" name="talkCenter" th:text="*{talkCenter}"></p>
    </h3>
    <div class="form-group comment_context_section">
				<textarea class="form-control" id="talkContent" name="talkContent" readonly rows="20"
                          th:field="*{talkContent}"
                          type="text"></textarea>
    </div>
    <div class="comment_count">
        <h3>
            &nbsp;回复
        </h3>
    </div>
    <div th:each="commentDto : ${commentDtos}">
        <div class="media">
            <div class="media-body">
                <span class="media-heading question_text" th:text="${commentDto.userName}"></span>
                <br>
                <span th:text="${commentDto.commentContent}"></span>
            </div>
        </div>
        <!--问题评论的操作-->
        <div class="comment_operating" style="position: relative;">
            <span class="glyphicon glyphicon-thumbs-up btn oper-btn"></span>
            <span class="glyphicon glyphicon-comment btn oper-btn"
                  onclick="subComment(this)" th:data-id="${commentDto.commentId}"
                  th:id="'sub_comment_btn-'+${commentDto.commentId}">
                    </span>
            <span class="question_text" th:text="${commentDto.commentCount}+'条回复'"></span>
            <span class="question_text" style="position:absolute;right:0px;"
                  th:text="${#dates.format(commentDto.commentTime, 'yyyy-MM-dd HH:mm:ss')}">评论时间</span>
        </div>
        <!--子评论的内容-->
        <div class="collapse sub_comments" th:id="'comment-'+${commentDto.commentId}">
            <!--提交子评论-->
            <div>
                <input class="form-control" placeholder="请输入评论的内容" th:id="${'input-'+commentDto.commentId}">
                <button class="btn btn-success btn-publish" onclick="submit_comment_comment(this)" th:data-id="${commentDto.commentId}"
                        type="button">评论
                </button>
            </div>
        </div>

        <hr class="comment_cut_line">
    </div>
    <!--提交问题评论-->
    <h3 class="comment_commit">
        &nbsp;提交评论
    </h3>

    <input id="question_parent_id" th:field="*{talkId}" type="hidden">
    <div class="form-group comment_context_section" id="comment_frame">
        <textarea class="form-control" id="question_comment_content" placeholder="输入评论内容" rows="7"></textarea>
    </div>
    <button class="btn btn-success btn-publish" onclick="submit_question_comment()" type="button">提交</button>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: ztree-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script type="text/javascript">
    $(function () {

    });

    function submitHandler() {
        //获取窗口索引
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

    function subComment(e) {
        const id = e.getAttribute("data-id");//获取评论id
        $('#sub_comment_btn-' + id).toggleClass("active");
        var subCommentContainer = $('#comment-' + id);
        subCommentContainer.toggleClass("in");
        if (subCommentContainer.hasClass("in") && subCommentContainer.children().length === 1) {
            $.getJSON("/sau/talk/comment/" + id, function (data) {
                $.each(data, function (index, comment) {
                    const mediaBodyElement = $("<div/>", {
                        "class": "media-body"
                    }).append($("<span/>", {
                        "class": "media-heading question_text",
                        "html": comment.userName
                    })).append($("<br/>")).append($("<span/>", {
                        "html": comment.commentContent
                    }));

                    const mediaElement = $("<div/>", {
                        "class": "media"
                    }).append(mediaBodyElement);
                    const operatingElement = $("<div/>", {
                        "class": "comment_operating",
                        "style": "position: relative"
                    }).append($("<span/>", {
                        "class": "glyphicon glyphicon-thumbs-up btn"
                    })).append($("<span/>", {
                        "class": "glyphicon glyphicon-comment btn oper-btn",
                        "th:id": 'sub_comment_btn-' + comment.commentId,
                        "th:data-id": comment.commentId,
                        "onclick": "subComment(this)"
                    })).append($("<span/>", {
                        "class": "question_text",
                        "html": comment.commentCount + '条回复'
                    })).append($("<span/>", {
                        "class": "question_text",
                        "style": "position:absolute;right:0px",
                        "html": comment.commentTime
                    }));

                    // const help = $("<div/>", {
                    // }).append($("<input/>", {
                    //  "class": "form-control",
                    //  "placeholder": '请输入评论的内容',
                    //  "th:id": 'input-' + comment.commentId
                    // })).append($("<button/>", {
                    //  "class": "btn btn-success btn-publish",
                    //  "type": "button",
                    //  "th:data-id": comment.commentId,
                    //  "onclick": submit_comment_comment(this),
                    //  "html": 评论
                    // }));
                    //
                    // const helper = $("<div/>", {
                    //  "class": "collapse sub_comments",
                    //  "th:id": 'comment-'+ comment.commentId
                    // }).append(help);

                    const lineElement = $("<hr/>", {
                        "class": "comment_cut_line"
                    });
                    const commentElement = $("<div/>")
                        .append(mediaElement)
                        .append(operatingElement)
                        // .append(helper)
                        .append(lineElement);

                    subCommentContainer.prepend(commentElement);
                });
            });
        }
    }

    /**
     * 根据传递的类型提交评论
     * @param parent_id
     * @param type
     * @param content
     */
    function submit_comment_by_type(parent_id, content) {
        if (!content) {
            alert("不能输入空的内容哦~");
            return;
        }
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "sau/talk/insertComment",
            data: {
                "parentId": parent_id,
                "content": content
            },
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $.operate.successCallback(data);
            }
        });
    }

    /**
     * 提交问题的回复
     */
    function submit_question_comment() {
        const id = $("#question_parent_id").val();
        const content = $("#question_comment_content").val();
        submit_comment_by_type(id, content);
    }

    /**
     * 提交评论的回复
     * @param e
     */
    function submit_comment_comment(e) {
        const id = e.getAttribute("data-id");//获得回复的id
        const content = $("#input-" + id).val();//根据id获得评论内容
        submit_comment_by_type(id, content);
    }

</script>
</body>
</html>
